CSS-селекторы в веб-формах ASP.NET

Question

У меня есть приложение для веб-форм с CSS-файлом для макета. Один из моих элементов, который будет намного сложнее сделать в CSS без использования идентификаторов, также должен иметь runat="server", так как я контролирую сторону сервера видимости.

<div id="x">
    <div id="whatever" runat="server" visible="false">
        <div id="y">
            ....
        </div>
    </div>
</div>

Моя проблема в том, что в CSS я не знаю, как игнорировать этот whatever div с моими селекторами, и если я не вставлю CSS в строку и не переведу серверный клиентский элемент управления, я не узнаю имена до времени выполнения.

#x
{
    position:absolute;
    height:30px;
}

    #x #whatever??? #y img
    {
        margin:-7px 15px 0 30px;
    }

    #x #whatever??? div
    {
        width:250px;
        float:left;
    }
etc.

Как мне обойти это? Есть ли контейнерный элемент управления на стороне сервера, который не отображает выходные данные, но может использоваться для управления видимостью / отображением его содержимого, или в CSS есть хитрость, чтобы игнорировать этот промежуточный div?

Это дополнительно смущает тот факт, что у меня есть div x на главной странице, а div whatever и y находятся на самой странице. Я знаю, что это не было бы проблемой, если бы я использовал MVC, но на данный момент переключение не вариант.

Answer 1

Я не уверен, что это только ваш пример, но вы, кажется, просматриваете все дерево каждый раз, когда выбираете что-то. Это не нужно в CSS, следующее поможет:

Прямой селектор 'x'

#x 
{ 
    position:absolute; 
    height:30px; 
} 

Любое изображение, которое является потомком 'y'

#y img 
{ 
    margin:-7px 15px 0 30px; 
} 

Любой div, являющийся потомком 'x'

#x div 
{ 
    width:250px; 
    float:left; 
} 

Здесь - это удобное и простое для понимания объяснение селектора, более или менее достаточно просто взять то, что вам нужно, и проверить его где-нибудь, например, здесь (Мой любимый сайт тестирования).

Answer 2

Если вы используете .net 4, вы можете указать ClientIDMode="Static" для блока, в котором вам нужен тот же идентификатор, который вы указали на стороне сервера.

На всякий случай, если это кому-то понадобится, вы можете получитьИдентификатор, сгенерированный фреймворком в вашем javascript, например:

document.getElementById('<%= some_control.ClientID %>');

Answer 3

Использование селекторов CSS-классов - это быстрый и простой способ решения этой проблемы - не так быстро, как селекторы CSS-идентификаторов, но они ВСЕГДА будут работать (вы можете вычислить идентификатор клиента для элемента div "what", но это изменится, если например, переместите его в элемент управления Panel, повторитель и т. д.)